<template>
    <div class="mr-page">
        <div class="mr-content" v-for="(leftItem,leftIndex) in firstList" :key="leftIndex">
            <div class="mr-left">
                <div>
                    <img :src="leftItem.imgSrc" alt="">
                    <p>{{leftItem.p1}}</p>
                </div>
                <div>
                    <img :src="leftItem.imgSrc5" alt="">
                    <p>{{leftItem.p2}}</p>
                </div>
                <div>
                    <img :src="leftItem.imgSrc3" alt="">
                    <p>{{leftItem.p3}}</p>
                </div>
                <div>
                    <img :src="leftItem.imgSrc4" alt="">
                    <p>{{leftItem.p4}}</p>
                </div>
            </div>
            <div class="mr-right">
                <div>
                    <span>{{ leftItem.title }}</span>
                </div>
                <p>{{leftItem.p1}}</p>
                <p>{{leftItem.p2}} </p>
                <p>{{leftItem.p3}}</p>
                <p>{{leftItem.p4}}</p>
                <img :src="leftItem.imgSrc2" alt="">
            </div>
        </div>
        <div class="mr-cehua">
            <div class="cehua-left">
                <h2>独家策划</h2>
                <div class="cehua-img">
                    <div class="cehua-left-arrow" @click="imgLeft">&lt;</div>
                    <div class="cehua-right-arrow" @click="imgRight">&gt;</div>
                    <img :src="defaultImg.imgSrc" alt="">
                </div>
            </div>
            <div class="cehua-right">
                <div class="fashion">FASHION</div>
                <div class="play">
                    <img src="../../assets/play.png" alt="">
                </div>
                <div class="mrmz">
                    <h6>美容美妆</h6>
                    <p>星头条VOL.08：李纯玩转秋冬唇色 全方位驾驭本季最IN妆容</p>
                </div>
            </div>
        </div>
        <div class="news-try">
            <div class="news-left">
                <div v-for="(newsItem,newsIndex) in newsList" :key="newsIndex">
                    <div> 
                        <img :src="newsItem.imgSrc" alt="">
                    </div>
                    <p>{{ newsItem.title }}</p>
                </div>
            </div>
            <div class="news-right">
                <div class="news-top">
                    <span :class="item.className" v-for="(item,index) in list" :key="index+'='" :style="{color: currentRemen == index ? '#fff' : '#444', backgroundColor: currentRemen == index ? 'pink' : '#E5E5E5'}" @click="remenChange(item,index)">{{ item.name }}</span>
                </div>
                <div class="news-bottom" ref="newsBottom" v-show="currentRemen == 0">
                    <div class="news-arrow-left" @click="remenLeft">&lt;</div>
                    <div class="news-arrow-right" @click="remenRight">&gt;</div>
                    <img :src="defaultRemen.imgSrc" alt="">
                    <span>{{ defaultRemen.location }}</span>
                    <p>{{ defaultRemen.title }}</p>
                    <p>{{ defaultRemen.price }}</p>
                </div>
                <div class="news-bottom" ref="newsBottom2" v-show="currentRemen == 1">
                    <div class="news-arrow-left" @click="xinpinLeft">&lt;</div>
                    <div class="news-arrow-right" @click="xinpinRight">&gt;</div>
                    <img :src="defaultXinpin.imgSrc" alt="">
                    <span>{{ defaultXinpin.location }}</span>
                    <p>{{ defaultXinpin.title }}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            firstList: [{
                imgSrc: require("../../assets/mr1.jpg"),
                imgSrc2: require("../../assets/mr2.jpg"),
                imgSrc3: require("../../assets/mr3.jpg"),
                imgSrc4: require("../../assets/mr4.jpg"),
                imgSrc5: require("../../assets/mr5.jpg"),
                p1: "美少女都爱粉红泡泡；「指甲油中的爱马仕」真的来了",
                p2: "将「隐形配饰」穿上身，没人能逃过它的魅力！",
                p3: "歌坛天后推出首款香水;甜蜜「樱桃可乐」是真香！",
                p4: "「世界上最丑颜色」竟有点好看；小哥哥们又出来营业啦",
                title: "今日热点"
            }],
            defaultImg: {
                imgSrc: require("../../assets/cehua1.jpg")
            },
            secondList: [{
                imgSrc: require("../../assets/cehua1.jpg")
            },{
                imgSrc: require("../../assets/cehua2.jpg")
            },{
                imgSrc: require("../../assets/cehua3.jpg")
            },{
                imgSrc: require("../../assets/cehua4.jpg")
            }],
            newsList: [{
                imgSrc: require("../../assets/news1.jpg"),
                title: "2021F\W CONDENSE法国珂蒂丝香水"
            },{
                imgSrc: require("../../assets/news2.jpg"),
                title: "IPSA第9代「ME自律乳」革新升级上市！"
            },{
                imgSrc: require("../../assets/news3.jpg"),
                title: "TSUBAKI丝蓓绮 “水光”级护理，养成会发光的秀发"
            },{
                imgSrc: require("../../assets/news4.jpg"),
                title: "Swisse斯维诗®2021主题新品预览活动北京站"
            }],
            list: [{
                className: 'remen',
                name: "热门试用"
            },{
                className: 'xinpin',
                name: "新品测评"
            }],
            // 热门
            defaultRemen: {
                imgSrc: require("../../assets/remen1.jpg"),
                location: "1/2",
                title: "fino芬浓透润美容液洗护套装",
                price: "正装 / 10份"
            },
            remen: [{
                imgSrc: require("../../assets/remen1.jpg"),
                location: "1/2",
                title: "fino芬浓透润美容液洗护套装",
                price: "正装 / 10份"
            },{
                imgSrc: require("../../assets/remen2.jpg"),
                location: "2/2",
                title: "HR赫莲娜绿宝瓶精华露PRO",
                price: "10ml / 16份"
            }],
            // 新品
            defaultXinpin: {
                imgSrc: require("../../assets/xinpin1.jpg"),
                location: "1/5",
                title: "fino芬浓透润美容液洗护套装"
            },
            xinpin: [{
                imgSrc: require("../../assets/xinpin1.jpg"),
                location: "1/5",
                title: "fino芬浓透润美容液洗护套装"
            },{
                imgSrc: require("../../assets/xinpin2.jpg"),
                location: "2/5",
                title: "温和洁面中的战「痘」机"
            },{
                imgSrc: require("../../assets/xinpin3.jpg"),
                location: "3/5",
                title: "谁能给你贴心守护？3款热门女性护理液比拼"
            },{
                imgSrc: require("../../assets/xinpin4.jpg"),
                location: "4/5",
                title: "通透0妆感 IPSA黑晶粉霜"
            },{
                imgSrc: require("../../assets/xinpin5.jpg"),
                location: "5/5",
                title: "猕猴桃女孩再见 飞利浦脱毛仪让你拥有仙女同款丝滑肌"
            }],
            imgNumber: 0,       // 热门模块里面左右切换图片
            remenNumber: 0,     // 热门
            currentRemen: 0,    // 当前点击的
            isShowNumber: 0,           // 切换热门和新品
            xinpinNumber: 0       // 新品模块里面左右切换
        }
    },
    methods: {
        imgLeft() {
            console.log(this.imgNumber);
            console.log(this.defaultImg.imgSrc)
            this.defaultImg.imgSrc = this.secondList[this.imgNumber].imgSrc;
            if(this.imgNumber > 0) {
                this.imgNumber --;
                console.log(this.secondList[this.imgNumber].imgSrc);
            }
            else {         
                this.imgNumber = this.secondList.length-1;
            }
        },
        imgRight() {
            console.log(this.defaultImg)
            console.log(this.imgNumber);
            this.defaultImg.imgSrc = this.secondList[this.imgNumber].imgSrc;
            if(this.imgNumber < this.secondList.length-1) {
                this.imgNumber ++;
                console.log(this.secondList[this.imgNumber].imgSrc);
            }
            else {
                this.imgNumber = 0
            }
        },
        remenLeft() {
            this.defaultRemen = this.remen[this.remenNumber]
            if(this.remenNumber > 0) {
                this.remenNumber --;
            }else {
                this.remenNumber = this.remen.length-1;
            }
        },
        remenRight() {
            this.defaultRemen = this.remen[this.remenNumber]
            if(this.remenNumber < this.remen.length-1) {
                this.remenNumber ++;
            }else {
                this.remenNumber = 0;
            }
        },
        remenChange(item,index) {
            this.isShowNumber = index
            if(index == 0) {
                this.$refs.newsBottom.style.display = 'block';
                this.$refs.newsBottom2.style.display = 'none';
            }else {
                this.$refs.newsBottom.style.display = 'none';
                this.$refs.newsBottom2.style.display = 'block';
            }
            this.currentRemen = index
        },
        xinpinLeft() {
            this.defaultXinpin = this.xinpin[this.xinpinNumber]
            if(this.xinpinNumber > 0) {
                this.xinpinNumber --;
            }else {
                this.xinpinNumber = this.xinpin.length-1;
            }
        },
        xinpinRight() {
            this.defaultXinpin = this.xinpin[this.xinpinNumber]
            if(this.xinpinNumber < this.xinpin.length-1) {
                this.xinpinNumber ++;
            }else {
                this.xinpinNumber = 0;
            }
        }
    }
}
</script>
<style scoped>
    /* 新品评测 */
    .news-try {
        width: 1166px;
        margin: 20px auto;
        border: 1px solid #000;
    }
    .news-left {
        width: 65%;
        float: left;
        overflow: hidden;
    }
    .news-left div {
        width: 49%;
        height: 395px;
        float: left;
        position: relative;
        margin-left: 1%;
        background: #fff;
        margin-bottom: 20px;
    }
    .news-left div div {
        width: 100%;
        height: 300px;
        margin-left: 0px;
        margin-bottom: 0px;
    } 
    .news-left div div img {
        width: 100%;
        height: 300px;
    }
    .news-left div p {
        position: absolute;
        left: 10px;
        top: 320px;
        font-size: 18px;
        color: #444;
        font-weight: bold;
    }
    .news-right {
        width: 33%;
        height: 395px;
        float: left;
        margin-left: 2%;
        background: #f6ecf0;
    }
    .news-top {
        width: 100%;
        height: 50px;
    }
    .news-top span {
        width: 50%;
        float: left;
        line-height: 50px;
        font-size: 18px;
        cursor: pointer;
    }
    .news-bottom {
        width: 100%;
        position: relative;
    }
    .news-arrow-left, .news-arrow-right {
        position: absolute;
        top: 150px;
        left: 0px;
        font-size: 20px;
        background: rgba(0,0,0,0.2);
        padding: 4px;
        color: #fff;
        cursor: pointer;
    }
    .news-arrow-right {
        left: 95%;
    }
    .news-bottom img {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        margin-top: 20px;
    }
    .news-bottom span {
        display: block;
        margin: 10px 0px;
    }
    .news-bottom p {
        height: 42px;
        padding: 0px 30px;
        box-sizing: border-box;
    }

    /* 独家策划 */
    .mr-cehua {
        width: 1166px;
        margin: 20px auto;
        /* border: 1px solid #000; */
        clear: both;
        overflow: hidden;
    }
    .cehua-left {
        width: 65%;
        float: left;
        background: #fff;
        border-top: 6px solid #000;
    }
    .cehua-left h2 {
        height: 60px;
        line-height: 60px;
        font-size: 24px;
        font-weight: normal;
        color: #444;
    }
    .cehua-img {
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .cehua-left-arrow, .cehua-right-arrow {
        position: absolute;
        top: 50%;
        left: -35px;
        transform: translateY(-50%);
        width: 70px;
        height: 70px;
        border-radius: 50%;
        color: #fff;
        font-size: 40px;
        background: rgba(0,0,0,0.3);
        padding-left: 24px;
        box-sizing: border-box;
        line-height: 72px;
        cursor: pointer;
    }
    .cehua-right-arrow {
        left: 723px;
        padding-left: 0px;
        padding-right: 24px;
    }
    .cehua-img img {
        width: 100%;
        height: 415px;
    }

    .cehua-right {
        width: 33%;
        float: left;
        margin-left: 2%;
        background: pink;
        color: #fff;
    }
    .fashion {
        width: 100%;
        height: 75px;
        line-height: 75px;
        font-size: 22px;
        background: url("../../assets/cehua-bg.jpg") no-repeat center;
    }
    .play {
        width: 100%;
        height: 280px;
        line-height: 280px;
    }
    .mrmz h6 {
        margin-top: 16px;
        font-weight: normal;
        font-size: 16px;
    }
    .mrmz p {
        width: 100%;
        padding: 0 10%;
        box-sizing: border-box;
        line-height: 26px;
        font-size: 18px;
        margin-top: 10px;
        font-weight: normal;
        margin-bottom: 26px;
    }

    .mr-page {
        width: 100%;
        overflow: hidden;
        background: #f3f3f3;
    }
    .mr-content {
        width: 1200px;
        overflow: hidden;
        margin: 50px auto;
    }
    /* 左边 */
    .mr-left {
        width: 65%;
        float: left;
        /* border: 1px solid #000; */
    }
    .mr-left div {
        width: 48%;
        height: 380px;
        float: left;
        margin-left: 2%;
        font-size: 18px;
        font-weight: bold;
        background: #fff;
        margin-bottom: 20px;
    }
    .mr-left div p {
        padding: 10px 10px;
        box-sizing: border-box;
        cursor: pointer;
        transition: all 1s;
    }
    .mr-left div p:hover {
        color: #f60;
    }
    .mr-left div img {
        width: 100%;
    }
    .mr-right {
        width: 32%;
        float: left;
        margin-left: 2%;
        padding: 0 1%;
        box-sizing: border-box;
        background: #f6ecf0;
    }
    .mr-right div {
        height: 40px;
        color: #fff;
        font-size: 22px;
        margin-bottom: 6px;
    }
    .mr-right div span {
        padding: 6px 0px;
        display: block;
        margin: 0px auto;
        width: 200px;
        background: #ffa6bb;
    }
    .mr-right p {
        width: 100%;
        height: 46px;
        line-height: 46px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin: 12px 0px;
    }
</style>